<template>
  <div class="item">
    <img :src="item.pic" alt="" />
    <p>{{ item.title }}</p>
  </div>
</template>

<script setup>
defineProps({
  item: {
    type: Object,
  },
});
</script>

<style scoped>
.item {
  border: 1px solid #333;
  padding: 10px;
  margin: 10px;
  display: flex;
}
.item img {
  width: 100px;
  height: 150px;
}
.item:hover {
  background-color: #652e8088;
  cursor: pointer;
}
</style>
